
// import { LikeOutlined, StarOutlined, DownloadOutlined, RiseOutlined } from '@ant-design/icons';

// import React, { useEffect, useState } from "react";
// import request, { baseUrl } from "../../utils/request";
// import { Row, Col, Tag, Layout } from 'antd'

// import { useNavigate } from "react-router-dom";
// const { Sider, Content } = Layout;

// function Play() {
//     const navigate = useNavigate()
//     const [newlist, setNewlist] = useState([])
//     useEffect(() => {
//         request.get('/list/show/category/动作', {
//             params: {
//                 size: 12,
//             }
//         }).then(({
//             data
//         }) => {
//             setNewlist(data.movielist.data)
//         })

//     }, [])
//     return (
//         <>
//             {newlist.map((item) => {
//                 return (
//                     <Row key={item.movieID}>
//                         {/* <Col>
//                             <div>
//                                 <h2>电影名字</h2>
//                                 <div className="shiping">
//                                     放视频播放
//                                 </div>

//                             </div>
//                             <Row>
//                                 <Col className="iop">
//                                     <Button >
//                                         <LikeOutlined />
//                                         <StarOutlined />
//                                         <DownloadOutlined />
//                                         <RiseOutlined />
//                                     </Button>

//                                 </Col>
//                             </Row>

//                         </Col> */}
//                         <div className='m'>
//                             <Col>
//                                 <Sider style={{ background: ' #fff', }}>
//                                     <Col>

//                                         <img onClick={() => {
//                                             navigate(`/detail/?movieID=${item.movieID}`)
//                                         }} src={baseUrl + '/imgs/' + item.imgNames} height={'260px'} width={'180px'} />

//                                     </Col>
//                                 </Sider>
//                                 <Content >
//                                     <Row >
//                                         <Col>
//                                             <h1><span style={{ fontWeight: '500', fontSize: '22px' }}>{item.title}</span></h1>
//                                         </Col>

//                                     </Row>
//                                     <Row>
//                                         <Col push={0} >
//                                             <Tag style={{ borderRadius: '50px' }} color="orange">{item.videoClass}</Tag>
//                                             <Tag style={{ borderRadius: '50px' }} color="geekblue">{item.startTime}</Tag>
//                                             <Tag style={{ borderRadius: '50px' }} color="geekblue">{item.address}</Tag>
//                                         </Col>
//                                     </Row>
//                                     <Row style={{ marginTop: '13px' }}>
//                                         <Col >
//                                             导演：
//                                         </Col>
//                                         <Col>
//                                             {item.director}
//                                         </Col>
//                                     </Row>
//                                     <Row>
//                                         <Col>
//                                             主演：
//                                         </Col>
//                                         <Col style={{
//                                             textAlign: 'left',
//                                             overflow: 'hidden',
//                                             width: '100%',
//                                             height: '20px',

//                                         }}>
//                                             {item.actors}
//                                         </Col>

//                                     </Row>
//                                     <Row>
//                                         <Col>
//                                             {item.douban}
//                                         </Col>
//                                     </Row>
//                                     <Row>
//                                         <Col style={{
//                                             textAlign: 'left',
//                                             overflow: 'hidden',
//                                             width: '100%',
//                                             height: '40px',
//                                         }
//                                         }>
//                                             {item.intro}
//                                         </Col>
//                                     </Row>

//                                 </Content>

//                             </Col>
//                         </div>


//                     </Row >
//                 )
//             })
//             }

//         </>
//     )

// }
// export default Play

import React, { useEffect, useState } from "react";
import request, { baseUrl } from "../../utils/request";
import { Row, Col, Layout, Tag, Space, Button } from 'antd'
import { VerticalAlignBottomOutlined } from '@ant-design/icons';
// import {useSearchParams} from 'react-router-dom'
import { useNavigate, useSearchParams } from "react-router-dom";
const { Sider, Content } = Layout;
function Search() {
    const [params, setParams] = useSearchParams()
    const [kw, setKw] = useState('')
    // console.log(params.get('kw'));

    useEffect(() => {
        setKw(params.get('kw'))
    }, [])

    const navigate = useNavigate()
    const [newlist, setNewlist] = useState([])

    useEffect(() => {
        request({
            url: '/list/search',
            params: {
                kw,
            }
        }).then(({
            data
        }) => {
            if(data.movielist.data){

                setNewlist(data.movielist.data)
            }else{
                setNewlist([])
            }

            // console.log(data, 'setdata');
        })
    }, [kw])
    return (
        <Row gutter={['0px', '30px']}>

            {newlist.map((item, idx) => {
                return (

                    <Col key={idx} span={ 20}>
                        <div key={item.movieID}>
                            <Layout style={{
                                borderRadius: '18px',
                                boxShadow: ' 0 7px 21px rgb(149 157 165 / 22%)',
                                background: ' #fff',
                                width: '600px',
                                margin: 'auto',
                                padding: '20px',
                                height: '330px',

                            }}>
                                <Sider style={{ background: ' #fff', }}>
                                    <Col >

                                        <img onClick={() => {
                                            navigate(`/detail/?movieID=${item.movieID}`)
                                        }} src={baseUrl + '/imgs/' + item.imgNames}  height={'260px'} width={'180px'}  />
                                        
                                    </Col>
                                </Sider>
                                <Content >
                                    <Row >
                                        <Col>
                                            <h1><span style={{ fontWeight: '500', fontSize: '22px' }}>{item.title}</span></h1>
                                        </Col>

                                    </Row>
                                    <Row>
                                        <Col push={0} >
                                            <Tag style={{ borderRadius: '50px' }} color="orange">{item.videoClass}</Tag>
                                            <Tag style={{ borderRadius: '50px' }} color="geekblue">{item.startTime}</Tag>
                                            <Tag style={{ borderRadius: '50px' }} color="geekblue">{item.address}</Tag>
                                        </Col>
                                    </Row>
                                    <Row style={{ marginTop: '13px' }}>
                                        <Col >
                                            导演：
                                        </Col>
                                        <Col>
                                            {item.director}
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            主演：
                                        </Col>
                                        <Col style={{
                                            textAlign: 'left',
                                            overflow: 'hidden',
                                            width: '100%',
                                            height: '20px',

                                        }}>
                                            {item.actors}
                                        </Col>

                                    </Row>
                                    <Row>
                                        <Col>
                                            {item.douban}
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col style={{
                                            textAlign: 'left',
                                            overflow: 'hidden',
                                            width: '100%',
                                            height: '40px',
                                        }
                                        }>
                                            {item.intro}
                                        </Col>
                                    </Row>
                                   

                                </Content>
                            </Layout>

                        </div>
                    </Col>
                )
            })}

        </Row >
    )
}

export default Search